import React, { Component } from 'react';
import './Singer.css'
class Singer extends Component {
    constructor(props) {
        super(props)

        this.state = {
            classification: [
                { title: '华语男', cat: 1001 },
                { title: '华语女', cat: 1002 },
                { title: '华语组合', cat: 1003 },
                { title: '欧美男', cat: 2001 },
                { title: '欧美女', cat: 2002 },
                { title: '欧美组合', cat: 2003 },
                { title: '日本男', cat: 6001 },
                { title: '日本女', cat: 6002 },
                { title: '日本组合', cat: 6003 },
                { title: '韩国男', cat: 7001 },
                { title: '韩国女', cat: 7002 },
                { title: '韩国组合', cat: 7003 },
                { title: '其他男歌手', cat: 4001 },
                { title: '其他女歌手', cat: 4002 },
                { title: '其他组合', cat: 4003 },
            ],
            //分类id
            id: '',
            letter: [],
            letterIndex: null,
            //小写字母
            initial: '',
            item: []
        }
        console.log(props);
    }
    //分类点击事件
    getIndex(e) {
        this.setState(state => {
            return {
                id: e.target.dataset.index,
                initial: this.state.initial,
            }
        }, () => {
            this.http()
        })
        localStorage.setItem('id', e.target.dataset.index)
    }
    //字母点击事件
    getI(e) {
        console.log(e.target.dataset.i);
        this.setState(state => {
            return {
                initial: e.target.dataset.i,
                letterIndex: e.target.dataset.index,
                id: this.state.id
            }
        }, () => {
            this.http()
        })
        localStorage.setItem("key", e.target.dataset.index);
    }
    http() {
        console.log(this.state.id, this.state.initial);
        this.$axios([{
            url: 'artist/list',
            params: {
                cat: this.state.id,
                initial: this.state.initial,
                offset: 0,
            }
        }]).then(res => {
            // console.log(res);
            console.log(res[0].artists);
            this.setState(state => {
                return {
                    item: res[0].artists
                }
            })
        })
    }
    componentDidMount() {
        var id = localStorage.getItem('key')
        var index = localStorage.getItem('id')
        if (index || id) {
            this.http()
        } else {
            this.$axios([{
                url: 'top/artists',
                params: {
                    offset: 0
                }
            }
            ]).then(res => {
                console.log(res[0].artists);
                this.setState(state => {
                    return {
                        item: res[0].artists
                    }
                })
            })
        }
        let arr = this.getUpperLetters()
        this.setState(state => {
            return {
                letter: arr
            }
        })

        this.setState(state => {
            return {
                id: index,
                letterIndex: id
            }
        })

    }

    getUpperLetters() {
        let letters = [];
        for (let i = 0; i < 26; i++) {
            letters.push(String.fromCharCode(65 + i));
        }
        return letters;
    }

    //跳转到歌手页
    goSingers(id) {
        console.log(id.target.dataset.id);
        this.props.history.push({
            pathname:'/singers',
            params:{
                id:id.target.dataset.id
            }
        })
    }
    render() {
        return (
            <div className="bigBox">
                <div className="bigBoxs">
                    <div className="scroll">
                        分类(默认热门):
                        {this.state.classification.map((item, index) => {
                            return (
                                <span className={this.state.id === item.cat ? 'actives' : null} data-index={item.cat} onClick={this.getIndex.bind(this)} key={index}>{item.title}</span>
                            )
                        })}
                    </div>
                    <div className="scroll2">
                        首字母:
                        {this.state.letter.map((item, index) => {
                            return (
                                <span className={this.state.letterIndex === index ? 'actives' : null} onClick={this.getI.bind(this)} data-i={item.toLowerCase()} data-index={index} key={index}>{item}</span>
                            )
                        })}
                    </div>
                </div>
                <div className="litilebox"></div>
                <div className="content">
                    {/* item */}
                    {this.state.item.map((item, index) => {
                        return (
                            <span className="binBox" data-id={item.id} onClick={this.goSingers.bind(this)} key={index}>
                                <img data-id={item.id} src={item.picUrl} alt="" />
                                <span data-id={item.id} className="singerName">{item.name}</span>
                            </span>)
                    })}

                </div>
            </div>
        );
    }
}

export default Singer;